<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <van-sticky>
    <van-nav-bar title="岗位列表" />
  </van-sticky>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="handleLoad"
    :offset="0"
  >
    <div class="flex flex-wrap justify-between px-8 mt-7">
      <job-item v-for="item in jobList" :jobdata="item" />
    </div>
  </van-list>
  <div class="h-52"></div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { jobGet } from "../api/pro";
import { JobType } from "../types/pro";

const jobList = ref<Array<JobType>>([]);

const loading = ref<boolean>(false); //分页加载状态
const finished = ref<boolean>(false); //是否加载完毕的状态
let page = 1;
const handleLoad = () => {
  //首屏及触底后会自动触发
  console.log("load执行了");
  jobGet(page).then((res) => {
    let { results } = res.data;
    if (results.length) {
      jobList.value = [
        ...jobList.value, //原数据
        ...results, //新数据
      ];
      loading.value = false; //每次请求完毕后，需要重置loading，保证下次请求正常发起
      page++;
      return;
    }
    finished.value = true; //结束分页请求交互，触底将不再发起请求
  });
};
</script>

<style scoped></style>
